﻿@model IEnumerable<loveMotorcade.web.Models.carClass>
@using loveMotorcade.web.Classes;
@{
    ViewBag.Title = "Index";
    
    paging paging = new paging();
    paging.pageSize = 12;
    paging.prevText = "Prev";
    paging.nextText = "Next";
    dynamic pagingMode;
    var vModel = paging.content(
        Model,
        out pagingMode, Html.getRoute("page").As<int>()
        );
    ViewBag.paging = pagingMode;
}

<h2>Index</h2>
@*<div class="progress-bar orange stripes">
        <span style="width:155px"></span>
</div>*@
<div class="list" style=" vertical-align:bottom">
    @Html.Partial("paging", new { action = "Index" })
@foreach (var item in vModel)
{
    <div class="carClassBox client" idv="@item.ID" totalNum="@item.totalNum">
        <span class="name" >@Html.DisplayFor(modelItem =>item.name)</span>
        <span class="totalNum2" > @Html.DisplayFor(modelItem =>item.totalNum) 辆 </span>
        <br />    

    @if (!String.IsNullOrWhiteSpace(item.pics)) { 
        <img src="/Content/upload/carClassPic/s/@(item.pics.tryToArray(",").FirstOrDefault()).jpg" />
    }else{
        <img src="/images/carpic.gif" />
    }    

        <span class="intro" >介绍：@Html.DisplayFor(modelItem =>item.intro)</span>
        <div class="picsPanel">
            <div style="float:left"></div>
            <div class="pics" val="@item.pics"></div>
        </div>
        <span class="price"> 价格：200元</span>
        <a href="###" onclick="viewCarClass(this)" class="orderBtn" >预定</a>
    </div>
}
</div>
<div id="siftForm" style="display:none">

    <ul class="employExp" style="float:left">
        <li class="a"><span class="title">A</span><span class="exp">上午&#160;06:00-08:00 </span><span class="null" id="employA">?</span><a href="###" onclick="orderingClick('A')" class="oBtn disable">预订</a></li>
        <li class="b"><span class="title">B</span><span class="exp">上午&#160;09:00-11:00 </span><span class="null" id="employB">?</span><a href="###" onclick="orderingClick('B')"  class="oBtn disable">预订</a></li>
        <li class="c"><span class="title">C</span><span class="exp">下午&#160;13:00-17:00 </span><span class="null" id="employC">?</span><a href="###" onclick="orderingClick('C')"  class="oBtn disable">预订</a></li>
        <li class="d"><span class="title">D</span><span class="exp">夜晚&#160;18:00-24:00 </span><span class="null" id="employD">?</span><a href="###" onclick="orderingClick('D')"  class="oBtn disable">预订</a></li>
    </ul>
    <div >
        <span>预定时间</span>
        <input name="employDate" id="employDate" value="" style="width:80px;margin:5px 0px; vertical-align:middle" />
        <button onclick="siftClick()">查询</button>
    </div>
    <div style=" clear:both;"></div>
</div>
<
<form id="orderingForm" >

    <input type="hidden" name="timeType" id="orderingTimeType" />
    <input type="hidden" name="id" id="orderingId" />
    <input type="hidden" name="dt" id="orderingDate" />
    <div id="orderingDateStr">时间：</div>
    <div>剩余：<span id="orderingSY"></span></div>
    <fieldset style="padding:2px 10px;">
        <legend style="font-weight:bold; color:#ff6a00">请入以下信息</legend>
        <div>
        预定数量：
        <input type="text" name="num" style="width:40px;" />
        预定类型：
        <select name="type">
            <option value="婚庆">婚庆</option>
            <option value="其他">其它</option>
        </select>
        </div>
        <div>
            联系人：<input name="linkman" style="width:60px" />
            联系方式：<input name="linkphone" style="width:60px"/>
        </div>
    </fieldset>
</form>
@section head{
@*    @Scripts.Render("~/Script/jquery.colorAnimations.js");*@
    <style>
        .ui-button-text
        {
            zoom:normal !important;
        }
        .ui-datepicker { width: 17em; padding: .2em .2em 0; display: none;font-size:12px; font-weight:100 }
        .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{font-weight:100;}
        .employExp a,.employExp a:link,.employExp a:visited{ margin-left:5px; background:#e0e0e0;color:#666; padding:1px 5px; display:inline-block;*display:inline;zoom:1; text-decoration:none }
        .employExp a:hover{ background:#ff6a00;color:#fff; }

    </style>
    <script>
        function orderingClick(it) {
            var _taget = $($.event.fix(event).target);
            var _parent = $($.event.fix(event).target).parent();
            if (_taget.hasClass("disable")) { return; }

            var _sy = _parent.find(".null").html();
            if (_sy == "?" || _sy == "") {
                alert("请先查询该日的预定情况")
                return;
            }
            $("#orderingTimeType").val(it);
            $("#orderingDate").val($("#employDate").val());
            $("#orderingId").val(carClasOpened.attr("idv"));
            $("#orderingDateStr").html("日期：" + $("#employDate").val() + "<br/>时段：" + _parent.find(".exp").text());
            $("#orderingSY").html(_sy);
            
            $("#orderingForm").dialog({
                title:"预定：" + carClasOpened.find(".name").html(),
                modal: true,
                width:500,
                resizable:false,
                buttons: {
                    提交: function () {
                        $.post("/carClass/ordering/" + $("#orderingId").val(),
                            $("#orderingForm").serialize(),
                            function (json) {
                                if (json.result == "ERROR") {
                                    alert(json.content)
                                } else if(json.result=="SUCCESS") {
                                    alert("预定成功");
                                    $("#orderingForm").dialog("close");
                                    getEmployDate();
                                }
                            })
                        //$(this).dialog("close");
                    }
                }
            });
        }
        function siftClick() {

            if ($("#employDate").val() == "") {
                alert("输入预定日期");
                return;
            } else {
                if(new Date($("#employDate").val()).toString()=="Invalid Date"){

                    alert("输入的日期不正确，\n列子：\"2011-12-5\"");
                    return;
                }
                getEmployDate();
            }
        }
        function initEmployDate(it) {
            it.find("#employA").html("?");
            it.find("#employA").css({ "background-position-x": -100 + "px" })
            it.find("#employB").html("?")
            it.find("#employB").css({ "background-position-x": -100 + "px" })
            it.find("#employC").html("?")
            it.find("#employC").css({ "background-position-x": -100 + "px" })
            it.find("#employD").html("?")
            it.find("#employD").css({ "background-position-x": -100 + "px" })
            it.find(".oBtn").attr("class", "oBtn disable");
        }
        function getEmployDate() {
            if ($("#employDate").val() == "") {
                return;
            }
            var id = carClasOpened.attr("idv");
            var _totalNum = carClasOpened.attr("totalNum");
            $.get("/carClass/searchEmploy/" + id, { dt: $("#employDate").val() }, function (json) {
                if (json.result == "SUCCESS") {
                    var $siftForm = $("#siftForm");
                    var _v;

                    _v = $siftForm.find("#employA");
                    _v.html(json.content.A);
                    _v.css({ "background-position-x": (-100 + (json.content.A / _totalNum) * 100) + "px" })
                    if (json.content.A>0) {
                        _v.next().attr("class", "oBtn")
                    }

                    _v = $siftForm.find("#employB");
                    _v.html(json.content.B);
                    _v.css({ "background-position-x": (-100 + (json.content.B / _totalNum) * 100) + "px" })
                    if (json.content.B>0) {

                        _v.next().attr("class", "oBtn")
                    }


                    _v = $siftForm.find("#employC");
                    _v.html(json.content.C)
                    _v.css({ "background-position-x": (-100 + (json.content.C / _totalNum) * 100) + "px" })
                    if (json.content.C>0) {
                        _v.next().attr("class", "oBtn")
                    }

                    _v = $siftForm.find("#employD");
                    _v.html(json.content.D)
                    _v.css({ "background-position-x": (-100 + (json.content.D / _totalNum) * 100) + "px" })
                    if (json.content.D>0) {
                        _v.next().attr("class", "oBtn")
                    }

                } else {
                    alert(json.content);
                }
            })
        }

        $(function () {
            $("#employDate").datepicker({
                changeMonth: true
  

            });
        })

        var carClasOpened = null;
        var oldCarClassOpened = null;

        function viewCarClass(it) {
           
            if (carClasOpened != null) {
                if (carClasOpened.get(0) == $(it).parent().get(0)) { return; }
                oldCarClassOpened = carClasOpened;
                carClasOpened.animate({ height: "150px", width: "224px" }, 400, "", function () {
                    oldCarClassOpened.find(".intro").hide();
                    oldCarClassOpened.find(".picsPanel").hide();
                    $("#siftForm").hide();
                });
            }

            carClasOpened = $(it).parent()
            carClasOpened.animate({
                height: "320px", width: "470px"
                //,"backgroundColor": "#FF3300"
            }, 400, "", function () {

                carClasOpened.find(".intro").fadeIn(300);
                carClasOpened.find(".picsPanel").show();
                var picbar = carClasOpened.find(".pics");
                if (picbar.children().size() == 0) {
                if (picbar.attr("val") != "") { 
                    var imgs = picbar.attr("val").split(",");
                
                    for (var i = 0; i < imgs.length; i++) {
                            picbar.append("<img src='/Content/Upload/carClasspic/s/" + imgs[i] + ".jpg' style='height:100%' />")
                        }
                    }
                }

                showSiftForm(carClasOpened);
                
            });
        }
        function showSiftForm($it) {

            if ($("#siftForm").length == 0) { return; }
            var $siftForm = $("#siftForm");
            $siftForm.appendTo($it);
            $siftForm.show();
            initEmployDate($siftForm);
            
        }
    </script>    
}
